@extends('layouts/app')

@section('content')
    <div class="search-title">
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box" style="height: auto;">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn bule" id="searchCancel">取消</a>
        </div>
    </div>

    {{--历史搜索--}}
    <div class="history-search" style="display: none;">
        <h5>历史搜索
            <svg class="icon pull-right f36" aria-hidden="true" onclick="removeSearchKey()">
                <use xlink:href="#icon-weibiaoti--12"></use>
            </svg>
        </h5>
        <div class="search-key">

        </div>
    </div>
   <div class="search-content">
       <ul class="shops-list">

       </ul>
   </div>
    <script charset="utf-8" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js "></script>

    <script>
        var lat = '', // 纬度
            lng = ''; // 经度



        // 进来先获得地理位置
        getLocation(function (cityInfo) {
            console.log("city", cityInfo);
            lat = cityInfo.lat;
            lng = cityInfo.lng;
        });

        // 创建搜索记录
        function createSearchKey () {
            var searchKeyArr = getSearchKey();
            if (searchKeyArr && searchKeyArr.length > 0) {
                console.log("searchKeyArr", searchKeyArr);
                var htmlText = [],
                    data = searchKeyArr.slice(-5);

                // 筛选最新的5条记录
                for (var i = data.length -1; i >= 0; i--) {
                    htmlText.push('<span>'+ data[i] +'</span>');
                }
                // 显示历史搜索记录面板
                $(".history-search").show();
                $(".search-key").html(htmlText.join(''));
            } else {
                console.log("没有搜索记录");
                $(".search-key").html('');
                $(".history-search").hide();
            }
        }
        createSearchKey ();

        // 搜索关键字
        $("#searchInput").on("input", function () {
            var str = $(this).val();
            if (str.length > 0) {
                getInvitationInfo(str);
            }

        });

        // 点击搜索记录
        $(".search-key").on("click", "span", function () {
            var key = $(this).text();
            getInvitationInfo(key);
        });


        // 查找商家、
        function getInvitationInfo (str) {
            $.get("/api/search/shop", {
                s: str,
                lat: lat,
                lng: lng
            }, function (res) {

                if (typeof res === 'string') {
                    res = JSON.parse(res);
                }
                $(".shops-list").html("");
                console.log('res', res);
                if (res.code == 200){

                    var data = {};
                    data['type'] = 'listPart';
                    data['element'] = '.shops-list';
                    data['data'] = res.data.data;

                    A.init(data);
                    // 缓存到历史搜索记录
                    saveSearchKey(str);
                } else {
                    $.toast("查询完毕", "text");
                }


            });
        }

        // 获取缓存的搜索记录
        function getSearchKey () {
            var keyArr = [];

            var search = Storage.get("searchKey");
            // 如果有缓存
            if (search.status) {
                // 因为存的是字符串，所以先JSON格式化
                keyArr = JSON.parse(search.value);

            }
            console.log("keyArr", keyArr);

            return keyArr;
        }
        // 保存数据
        function saveSearchKey (str) {
            // 获取缓存的数据
            var data = getSearchKey();

            // 判断是否有缓存
            if (data && data.length > 0) {
                var flag = true;
                for (var i = 0; i < data.length; i++) {
                    console.log("data[i]", data[i]);
                    if (str == data[i]) {
                        flag = false;
                        return;
                    }
                }
                console.log("flag", flag);
                // 如果没有重复，加进去
                if (flag) {
                    data.push(str)
                }
            } else {
                // 如果是第一次
                data[0] = str;
            }

            // 写入缓存
            Storage.set("searchKey", JSON.stringify(data));
        }

        // 删除历史搜索记录
        function removeSearchKey () {
           Storage.remove("searchKey", function () {
               createSearchKey();
           });
        }
    </script>
@endsection


@extends('layouts/footer')
